<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
	<meta name="format-detection" content="telephone=no, address=no, email=no">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="x5-orientation" content="portrait">
	<title>宝贝转转来 </title>
	<link href="index/reset.css" rel="stylesheet" >
	<link href="index/style.css" rel="stylesheet" >
	<script src="js/jquery-1.10.1.min.js"></script>
	<script type="text/javascript" src="js/awardRotate.js"></script>
	
</head>
<body style="overflow-y:auto;">
	<div class="warp-page">
		<div class="zhuan-bg">
			<div class="zhuan-box" id="rotate">
				<div class="xuan xuan01"><p>红包10元</p><img src="images/xuan09.png" /></div>	
				<div class="xuan xuan02"><p>黄鹤楼</p><img src="images/xuan05.png" /></div>	
				<div class="xuan xuan03"><p>红包100元</p><img src="images/xuan09.png" /></div>	
				<div class="xuan xuan04"><p>苹果6s </p><img src="images/xuan10.png" /></div>	
				<div class="xuan xuan05"><p>红包50元</p><img src="images/xuan09.png" /></div>	
				<div class="xuan xuan06"><p>平板电脑</p><img src="images/xuan06.png" /></div>	
				<div class="xuan xuan07"><p>红包60元</p><img src="images/xuan09.png" /></div>	
				<div class="xuan xuan08"><p>劳斯拉斯</p><img src="images/xuan07.png" /></div>	
			</div>
			<div class="pointer"><img src="images/clicks.png" alt="pointer"/></div>
		</div>
		
		<div class="girl-box">
			<img src="images/girl.png">
		</div>
		<div class="btn-box">
			<div class="warp-text">
				<div class="text-num">
					抽奖次数还有 3 次机会呦! 
				</div>
			</div>
			<div class="warp-btn">
				<a class="a-btn" href="我的中奖记录.html">
					我的中奖纪录 
				</a>
			</div>
			<div class="warp-tip">
				<img src="images/text-tip.png">
			</div>
		</div>
	</div>
	<div class="warp-list">
		<div class="list-box">
			<ul>
				<li class="row no-gutter">
					<div class="col-6">恭喜 ~小情调~</div>
					<div class="col-6 tr">获得 <span class="text-red">ipad air2</span> 一台</div>
				</li>
				<li class="row no-gutter">
					<div class="col-6">恭喜 ~小情调~</div>
					<div class="col-6 tr">获得 <span class="text-red">苹果笔记本</span> 一台</div>
				</li>
				<li class="row no-gutter">
					<div class="col-6">恭喜 ~小情调~</div>
					<div class="col-6 tr">获得 <span class="text-red">ipad air2</span> 一台</div>
				</li>
				<li class="row no-gutter">
					<div class="col-6">恭喜 ~小情调~</div>
					<div class="col-6 tr">获得 <span class="text-red">苹果笔记本</span> 一台</div>
				</li>
				<li class="row no-gutter">
					<div class="col-6">恭喜 ~小情调~</div>
					<div class="col-6 tr">获得 <span class="text-red">ipad air2</span> 一台</div>
				</li>
				<li class="row no-gutter">
					<div class="col-6">恭喜 ~小情调~</div>
					<div class="col-6 tr">获得 <span class="text-red">ipad air2</span> 一台</div>
				</li>
			</ul>
		</div>
	</div>
</body>

<!--弹窗-->
	<div class="warp-gonggao" id="smalltip">
		<div class="tan-overlay"></div>
		<div class="gg-box">
			<div class="close-x" data-dialog-close></div>
			<div class="tip-box">
				<div class="tip-title tc">
					<div class="yes-imgp">
						<img src="images/xuan05.png">
					</div>
					<div class="no-imgp" style="display:none;">
						<img src="images/tan00.png">
					</div>
				</div>
				
				<div class="tip-body">
					<p class="tip-text tc">恭喜您！获得<span id="sapntext">苹果6s</span> </p><!--奖品君与你擦肩而过！再抽一次吧！-->
					<div class="btn-box" style="position:relative;">
						<div class="warp-btn" style="padding:0;">
							<a class="a-btn" href="#" style="color:#fff;font-size:.9rem;padding:0 1.4rem;">
								立即领取 
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
<script src="js/dialogFx.js"></script>
<script src="js/scroll.js"></script>

<script type="text/javascript">
	$(function (){
	
		var rotateTimeOut = function (){
			$('#rotate').rotate({
				angle:0,
				animateTo:2160,
				duration:8000,
				callback:function (){
					alert('网络超时，请检查您的网络设置！');
				}
			});
		};
		var bRotate = false;
	
		var rotateFn = function (awards, angles, txt,img){
			bRotate = !bRotate;
			$('#rotate').stopRotate();
			$('#rotate').rotate({
				angle:0,
				animateTo:angles+1800,
				duration:8000,
				callback:function (){
					rotateText(txt,img); // 弹窗
					//alert(txt);
					bRotate = !bRotate;
				}
			})
		};
	
		$('.pointer').click(function (){
	
			if(bRotate)return;
			var item = rnd(0,7);
	
			switch (item) {
				case 0:
					//var angle = [26, 88, 137, 185, 235, 287, 337];
					rotateFn(0, 22, '劳斯拉斯','images/xuan07.png');
					break;
				case 1:
					//var angle = [88, 137, 185, 235, 287];
					rotateFn(1, 68, '红包60元','images/xuan09.png');
					break;
				case 2:
					//var angle = [137, 185, 235, 287];
					rotateFn(2, 113, '平板电脑','images/xuan06.png');
					break;
				case 3:
					//var angle = [137, 185, 235, 287];
					rotateFn(3, 158, '红包50元','images/xuan09.png');
					break;
				case 4:
					//var angle = [185, 235, 287];
					rotateFn(4, 203, '苹果6s ','images/xuan10.png');
					break;
				case 5:
					//var angle = [185, 235, 287];
					rotateFn(5, 248, '红包100元','images/xuan09.png');
					break;
				case 6:
					//var angle = [235, 287];
					rotateFn(6, 293, '黄鹤楼','images/xuan05.png');
					break;
				case 7:
					//var angle = [287];
					rotateFn(7, 338, '红包10元','images/xuan09.png');
					break;
			}
	
			console.log(item);
		});
		
		function rnd(n, m){
			return Math.floor(Math.random()*(m-n+1)+n)
		}
		
		//弹窗
	    var smalltip = new DialogFx('#smalltip');
	    
	    var rotateText = function (txt,img){
	    	$(".yes-imgp").find("img").attr('src',img);
	    	$("#sapntext").text(txt);
	    	smalltip.toggle(); //弹窗
	    }
	    
	    // 滚动文字
		var liheight = $(".list-box .row").height();
		$("div.list-box").myScroll({
			speed:40,
			rowHeight:liheight
		});
	});
	
		
	
	
</script>


</html>